<template>
  <div>
    <el-breadcrumb class="mb-30px text-16px">
      <el-breadcrumb-item :to="{ path: '/search/video' }"
        >视频库</el-breadcrumb-item
      >
      <el-breadcrumb-item>视频详情</el-breadcrumb-item>
    </el-breadcrumb>
    <video
      ref="videoElement"
      id="videoElement"
      controls
      style="width: 100%; height: 500px"
    ></video>
    <div class="info_wrap">
      <div class="title_wrap">
        <div class="title">{{ detail.title }}</div>
        <div class="collect_box" @click="switch_icon">
          <!-- <img v-show="!show" src="/static/collect.png" alt="">
				<img v-show="show" src="/static/collect_active.png" alt=""> -->
          <!-- <SvgIcon
            :name="collect ? 'hongxin' : 'huixin'"
            color="#bb0615"
            width="30px"
            height="30px"
          />
          <div class="ml-5px text-18px text-center">{{ detail.collect_number }}</div> -->
        </div>
      </div>
      <div class="time mt-30px">
        {{ detail.ctime }} | {{ detail.clicks }}次观看
      </div>
      <el-tag
        type="primary"
        class="mr-10px"
        v-for="item in detail.keyword?.split(',')"
        :key="item"
        >{{ item }}</el-tag
      >

      <div class="mt-40px flex">
        <img class="w-279px h-404px" :src="detail.teacher_header_img" alt="" />
        <div>
          <div class="box">
            <div class="flex">
              <p class="text-25px mr-10px">{{ detail.teacher }}</p>
              <p class="text-15px mt-10px">{{ detail.teacher_position }}</p>
            </div>
            <div class="w-23px h-4px bg-#bb0615 mt-10px mb-12px"></div>
            <ul>
              <li
                v-for="(item, index) in detail.teacher_job?.split(';')"
                :key="index"
                id="job"
              >
                {{ item }}
              </li>
            </ul>
            <div class="detail">{{ detail.teacher_introduce }}</div>
          </div>
        </div>
      </div>
      <!-- <div class="">
        <div class="label">【课程主要内容】</div>
        <ul>
          <li v-for="(item, index) in detail.content" :key="index">
            {{ item }}
          </li>
        </ul>
      </div>
      <div class="">
        <div class="label">【主讲人】{{ detail.teacher }}</div>
        <img class="w-200px" :src="detail.teacher_header_img" alt="" />
        <ul>
          <li
            v-for="(item, index) in detail.teacher_header_job?.split(';')"
            :key="index"
          >
            {{ item }}
          </li>
        </ul>
      </div>
      <div class="detail">{{ detail.teacher_header_introduce }}</div> -->
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, nextTick } from "vue";
import flvjs from "flv.js";
import axios from "axios";
import { get_video, video_detail } from "@/api/index";
import { useRoute } from "vue-router";

const detail = ref({});
const data_list = ref([]);
const url = ref("");
const $route = useRoute();

onMounted(() => {
  fetchVideoDetail();
});

const fetchVideoDetail = async () => {
  const params = {
    video_id: $route.query.id,
  };
  const { data } = await video_detail(params);
  detail.value = data;
  startPlayback();
};

const startPlayback = () => {
  const videoElement = document.getElementById("videoElement");
  if (flvjs.isSupported()) {
    let player = flvjs.createPlayer({
      type: "flv",
      isLive: false,
    });

    player.attachMediaElement(videoElement); //将播放实例注册到节点
    player.load();
    player.play();

    const loadSegment = async () => {
      try {
        const params = {
          video_id: $route.query.id,
        };
        const { data } = await axios.get("/video/get_video", {
          // headers: { Range: `bytes=${start}-${end}` },
          responseType: "blob",
          params,
        });

        const flvBlob = new Blob([data], {
          type: "video/x-flv",
        });

        const flvUrl = URL.createObjectURL(flvBlob);
        player.unload(); // 取消数据流加载
        player.detachMediaElement(); // 将播放实例从节点中取出

        player = flvjs.createPlayer({
          type: "flv",
          isLive: false,
          url: flvUrl,
        });
        player.attachMediaElement(videoElement);
        player.load();
        player.play();
      } catch (error) {
        console.error("错误:", error);
      }
    };
    loadSegment();
    videoElement.addEventListener("ended", () => {});
  } else {
    console.error("FLV.js 不支持此浏览器");
  }
};
</script>

<style scoped lang="scss">
#job {
  font-size: 15px;
  line-height: 23px;
}
.box {
  padding: 20px 22px 36px 26px;
  margin-left: 23px;
  width: 890px;
  height: auto;
  border: 1px solid #e2e2e2;
}
video {
  width: 100%;
  height: auto;
}
.info_wrap {
  padding: 10px 30px;

  .btn-wrap {
    // width: 750px;
    position: fixed;
    padding: 0 20px;
    left: 50%;
    bottom: 0px;
    transform: translateX(-50%);
    height: 150px;
    background-color: #eee;

    .btn {
      margin-top: 40px;
      margin-left: 30px;
      width: 690px;
      background-color: #1296db;
      height: 80px;
      border-radius: 35px;
      text-align: center;
      line-height: 80px;
      color: #fff;
      font-size: 36px;
    }
  }

  .title_wrap {
    display: flex;
    justify-content: space-between;
    // align-items: center;

    .title {
      margin-top: 20px;
      margin-bottom: -20px;
      font-size: 26px;
      font-weight: 600;
    }

    .collect_box {
      margin-right: 30px;
      margin-top: 20px;
      cursor: pointer;

      img {
        width: 50px;
      }

      .collect {
        text-align: center;
      }
    }
  }

  .time {
    margin-bottom: 20px;
    font-size: 20px;
    color: #999;
  }

  .label {
    margin: 10px 0;
    font-size: 20px;
    font-weight: 600;
  }

  li {
    line-height: 54px;
    font-size: 18px;
  }

  .detail {
    margin-top: 38px;
    font-size: 15px;
    line-height: 23px;
  }
}
</style>
